<!DOCTYPE html>
<html>

<head>
    <title>SemanticFinder - Frontend-only Semantic Search with transformers.js</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Frontend-only Semantic Search with transformers.js.">
</head>

<body>
    <div class="toast" id="toastMessage">
        <span id="toastText"></span>
        <span id="closeToastButton" class="close-button">X</span>
    </div>
    <div class="container mt-1">
        <div class="row justify-content-left">
            <div id="introContainer" class="col-sm-9">

                <img id="SemanticFinderLogo" src="./SemanticFinder.svg" alt="SemanticFinder Logo">
                <div class="content" id="introContentDiv">
                    <br>
                    <h4>Frontend-only live semantic search with <a href="https://xenova.github.io/transformers.js/"
                            target="_blank">transformers.js</a>. <a
                            href="https://github.com/do-me/SemanticFinder">GitHub</a></h4>
                    <p>
                        <p>Semantic search right in your browser! Calculates the embeddings and cosine similarity client-side without server-side inferencing.
                             Your <b>data is private</b> and stays in your browser.<br>
                             Just copy & paste any text in the text area and hit <b>Find</b>. Set a different chunk size for finer or coarser search.<br>
                             <b>Large books</b> can be indexed too and searched in less than 2 seconds!<br> Examples: 
                            <a href="?hf=King_James_Bible_24f6dc4c">The Bible (en)</a>, 
                            <a href="?hf=Les_Misérables_2239df51">Les Misérables (fr)</a>, 
                            <a href="?hf=Das_Kapital_c1a84fba">Das Kapital (de)</a>, 
                            <a href="?hf=Don_Quijote_14a0b44">Don Quijote (es)</a>, 
                            <a href="?hf=Divina_Commedia_d5a0fa67">Divina Commedia (it)</a>,
                            <a href="?hf=Iliad_8de5d1ea">Iliad (gr)</a>,                  
                            <a href="?hf=IPCC_Report_2023_2b260928">IPCC Report 2023 (en)</a>.
                            Full catalogue with pre-indexed examples on <a href="https://huggingface.co/datasets/do-me/SemanticFinder">Huggingface</a>.
                            <a href="https://huggingface.co/datasets/do-me/SemanticFinder#create-semanticfinder-files" target="_blank">Contribute the indices of the documents you indexed</a>
                             or open a <a href="https://github.com/do-me/SemanticFinder/issues/new" target="_blank">request on GitHub</a> with a source URL.
                          </p>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="container mt-1">
        <div class="row justify-content-center">
            <div class="col-sm-9"> <!-- 80% column for text region-->
                <form class="form-floating">
                    <div class="form-group" id="formGroupCenter">
                        <div class="row no-gutters">
                            <div class="col-md-10">
                                <div class="form-floating input-group mb-2">
                                    <input type="text" id="query-text" class="form-control"
                                        placeholder="Enter query here" value="food" />
                                    <label for="query-text">Semantic Query</label>
                                    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#advancedFeaturesContent" id="settingsButton">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            fill="currentColor" class="bi bi-gear-fill" viewBox="0 0 16 16">
                                            <path
                                                d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z" />
                                        </svg>
                                    </button>
                                </div>

                            </div>

                            <div class="col-md-2">
                                <button onclick="onSubmit(); return false;" id="submit_button"
                                    class="btn btn-primary submit-button  btn-lg mb-2 form-control" disabled>
                                    Loading...
                                </button>
                            </div>
                        </div>


                        <!-- settings -->
                        <div class="col-12">
                            <div id="advancedFeaturesContent" class="collapse">
                                <div class="card">
                                    <!-- <div class="card-header">
                                        <h5 class="card-title">Settings</h5>
                                    </div>-->
                                    <div class="card-body">
                                        <div class="row">
                                            <h6>Model Selection</h6>
                                            <div class="col-md-8">
                                                <div class="form-floating mb-2">
                                                    <!-- all models from https://huggingface.co/models?pipeline_tag=feature-extraction&library=transformers.js + gte-tiny -->
                                                    <select class="form-select form-control " id="model-name">
                                                        <option selected value="TaylorAI/gte-tiny">TaylorAI/gte-tiny |
                                                            💾22.9Mb
                                                            📥1752 ❤️102</option>
                                                        <option value="Supabase/gte-small">Supabase/gte-small | 💾34Mb
                                                            📥2625 ❤️14</option>
                                                        <option value="Supabase/bge-small-en">Supabase/bge-small-en |
                                                            💾34Mb
                                                            📥12 ❤️1</option>
                                                        <option value="Xenova/multilingual-e5-small">
                                                            Xenova/multilingual-e5-small | 💾118Mb 📥5 ❤️0</option>
                                                        <option value="Xenova/multilingual-e5-base">
                                                            Xenova/multilingual-e5-base | 💾279Mb 📥1 ❤️0</option>
                                                        <option value="Xenova/bge-small-en-v1.5">
                                                            Xenova/bge-small-en-v1.5 |
                                                            💾34Mb 📥1 ❤️1</option>
                                                        <option value="WhereIsAI/UAE-Large-V1">WhereIsAI/UAE-Large-V1 |
                                                            💾334Mb
                                                            📥54.200 ❤️40</option>
                                                        <option value="Xenova/all-MiniLM-L6-v2">Xenova/all-MiniLM-L6-v2
                                                            |
                                                            💾23Mb 📥31 ❤️11</option>
                                                        <option value="Xenova/bge-large-en-v1.5">
                                                            Xenova/bge-large-en-v1.5 |
                                                            💾337Mb 📥18 ❤️1</option>
                                                        <option value="Xenova/gte-small">Xenova/gte-small | 💾34Mb 📥9
                                                            ❤️3
                                                        </option>
                                                        <option value="Xenova/all-mpnet-base-v2">
                                                            Xenova/all-mpnet-base-v2 |
                                                            💾110Mb 📥7 ❤️0</option>
                                                        <option value="Xenova/paraphrase-mpnet-base-v2">
                                                            Xenova/paraphrase-mpnet-base-v2 | 💾110Mb 📥7 ❤️0</option>
                                                        <option value="Xenova/all-MiniLM-L12-v2">
                                                            Xenova/all-MiniLM-L12-v2 |
                                                            💾34Mb 📥7 ❤️1</option>
                                                        <option value="Xenova/gte-large">Xenova/gte-large | 💾337Mb 📥5
                                                            ❤️1
                                                        </option>
                                                        <option value="Xenova/bge-base-en-v1.5">Xenova/bge-base-en-v1.5
                                                            |
                                                            💾110Mb 📥4 ❤️1</option>
                                                        <option value="Xenova/all-roberta-large-v1">
                                                            Xenova/all-roberta-large-v1 | 💾357Mb 📥2 ❤️0</option>
                                                        <option value="Xenova/distiluse-base-multilingual-cased-v2">
                                                            Xenova/distiluse-base-multilingual-cased-v2 | 💾135Mb 📥2
                                                            ❤️1
                                                        </option>
                                                        <option value="Xenova/paraphrase-multilingual-mpnet-base-v2">
                                                            Xenova/paraphrase-multilingual-mpnet-base-v2 | 💾279Mb 📥2
                                                            ❤️1
                                                        </option>
                                                        <option value="Xenova/bge-large-zh">Xenova/bge-large-zh |
                                                            💾327Mb
                                                            📥2 ❤️0</option>
                                                        <option value="Xenova/paraphrase-albert-small-v2">
                                                            Xenova/paraphrase-albert-small-v2 | 💾39.7Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/paraphrase-albert-base-v2">
                                                            Xenova/paraphrase-albert-base-v2 | 💾40Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/squeezebert-uncased">
                                                            Xenova/squeezebert-uncased | 💾51.2Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/squeezebert-mnli">Xenova/squeezebert-mnli
                                                            |
                                                            💾51.3Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/vit-base-patch16-224-in21k">
                                                            Xenova/vit-base-patch16-224-in21k | 💾87.5Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/all-distilroberta-v1">
                                                            Xenova/all-distilroberta-v1 | 💾82.1Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/paraphrase-multilingual-MiniLM-L12-v2">
                                                            Xenova/paraphrase-multilingual-MiniLM-L12-v2 | 💾118Mb 📥0
                                                            ❤️1
                                                        </option>
                                                        <option value="Xenova/paraphrase-MiniLM-L6-v2">
                                                            Xenova/paraphrase-MiniLM-L6-v2 | 💾23Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/bert-base-nli-mean-tokens">
                                                            Xenova/bert-base-nli-mean-tokens | 💾110Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/distilbert-base-nli-mean-tokens">
                                                            Xenova/distilbert-base-nli-mean-tokens | 💾66.9Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/distilbert-base-nli-stsb-mean-tokens">
                                                            Xenova/distilbert-base-nli-stsb-mean-tokens | 💾66.9Mb 📥0
                                                            ❤️0
                                                        </option>
                                                        <option value="Xenova/distiluse-base-multilingual-cased-v1">
                                                            Xenova/distiluse-base-multilingual-cased-v1 | 💾135Mb 📥0
                                                            ❤️0
                                                        </option>
                                                        <option value="Xenova/msmarco-distilbert-base-v4">
                                                            Xenova/msmarco-distilbert-base-v4 | 💾66.9Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/multi-qa-MiniLM-L6-cos-v1">
                                                            Xenova/multi-qa-MiniLM-L6-cos-v1 | 💾23Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/multi-qa-distilbert-cos-v1">
                                                            Xenova/multi-qa-distilbert-cos-v1 | 💾66.9Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/multi-qa-mpnet-base-cos-v1">
                                                            Xenova/multi-qa-mpnet-base-cos-v1 | 💾110Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/multi-qa-mpnet-base-dot-v1">
                                                            Xenova/multi-qa-mpnet-base-dot-v1 | 💾110Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/nli-mpnet-base-v2">
                                                            Xenova/nli-mpnet-base-v2 |
                                                            💾110Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/paraphrase-MiniLM-L3-v2">
                                                            Xenova/paraphrase-MiniLM-L3-v2 | 💾17.5Mb 📥0 ❤️0</option>
                                                        <option
                                                            value="Xenova/xlm-r-100langs-bert-base-nli-stsb-mean-tokens">
                                                            Xenova/xlm-r-100langs-bert-base-nli-stsb-mean-tokens |
                                                            💾279Mb
                                                            📥0 ❤️0</option>
                                                        <option value="Xenova/dino-vitb16">Xenova/dino-vitb16 | 💾87.5Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/dino-vits8">Xenova/dino-vits8 | 💾23.4Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/dino-vitb8">Xenova/dino-vitb8 | 💾88.8Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/dino-vits16">Xenova/dino-vits16 | 💾22.7Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/scibert_scivocab_uncased">
                                                            Xenova/scibert_scivocab_uncased | 💾111Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/spanbert-large-cased">
                                                            Xenova/spanbert-large-cased | 💾335Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/spanbert-base-cased">
                                                            Xenova/spanbert-base-cased | 💾109Mb 📥0 ❤️0</option>
                                                        <option value="sdan/simple-embeddings">sdan/simple-embeddings |
                                                            💾23Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/sentence_bert">Xenova/sentence_bert |
                                                            💾110Mb
                                                            📥0 ❤️0</option>
                                                        <option value="Xenova/e5-small-v2">Xenova/e5-small-v2 | 💾34Mb
                                                            📥0
                                                            ❤️3</option>
                                                        <option value="Xenova/SapBERT-from-PubMedBERT-fulltext">
                                                            Xenova/SapBERT-from-PubMedBERT-fulltext | 💾110Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/indobert-base-p1">Xenova/indobert-base-p1
                                                            |
                                                            💾125Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/UMLSBert_ENG">Xenova/UMLSBert_ENG |
                                                            💾110Mb
                                                            📥0 ❤️1</option>
                                                        <option value="Xenova/rubert-base-cased">
                                                            Xenova/rubert-base-cased |
                                                            💾178Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/kobert">Xenova/kobert | 💾92.8Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/e5-small">Xenova/e5-small | 💾34Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/e5-large">Xenova/e5-large | 💾337Mb 📥0
                                                            ❤️0
                                                        </option>
                                                        <option value="Xenova/e5-large-v2">Xenova/e5-large-v2 | 💾337Mb
                                                            📥0
                                                            ❤️5</option>
                                                        <option value="Xenova/e5-base">Xenova/e5-base | 💾110Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/e5-base-v2">Xenova/e5-base-v2 | 💾110Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/instructor-base">Xenova/instructor-base |
                                                            💾110Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/instructor-large">Xenova/instructor-large
                                                            |
                                                            💾337Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/sentence-t5-large">
                                                            Xenova/sentence-t5-large |
                                                            💾337Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/multilingual-e5-large">
                                                            Xenova/multilingual-e5-large | 💾562Mb 📥0 ❤️1</option>
                                                        <option value="Xenova/mms-300m">Xenova/mms-300m | 💾318Mb 📥0
                                                            ❤️0
                                                        </option>
                                                        <option value="Xenova/mms-1b">Xenova/mms-1b | 💾969Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Supabase/e5-small-v2">Supabase/e5-small-v2 |
                                                            💾34Mb
                                                            📥0 ❤️1</option>
                                                        <option value="Supabase/all-MiniLM-L6-v2">
                                                            Supabase/all-MiniLM-L6-v2
                                                            | 💾23Mb 📥0 ❤️1</option>
                                                        <option value="Xenova/gte-base">Xenova/gte-base | 💾110Mb 📥0
                                                            ❤️0
                                                        </option>
                                                        <option value="Xenova/bge-small-en">Xenova/bge-small-en | 💾34Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/bge-base-en">Xenova/bge-base-en | 💾110Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/bge-large-en">Xenova/bge-large-en |
                                                            💾337Mb
                                                            📥0 ❤️0</option>
                                                        <option value="ggrn/bge-small-en">ggrn/bge-small-en | 💾34Mb 📥0
                                                            ❤️1
                                                        </option>
                                                        <option value="Xenova/bge-base-zh">Xenova/bge-base-zh | 💾103Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/bge-large-zh-noinstruct">
                                                            Xenova/bge-large-zh-noinstruct | 💾327Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/bge-small-zh">Xenova/bge-small-zh | 💾24Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/ClinicalBERT">Xenova/ClinicalBERT |
                                                            💾229Mb
                                                            📥0 ❤️0</option>
                                                        <option value="Xenova/LaBSE">Xenova/LaBSE | 💾472Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/wavlm-base">Xenova/wavlm-base | 💾95.8Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/wavlm-base-plus">Xenova/wavlm-base-plus |
                                                            💾95.8Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/wavlm-large">Xenova/wavlm-large | 💾319Mb
                                                            📥0
                                                            ❤️0</option>
                                                        <option value="Xenova/sentence-camembert-large">
                                                            Xenova/sentence-camembert-large | 💾339Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/herbert-base-cased">
                                                            Xenova/herbert-base-cased
                                                            | 💾125Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/herbert-large-cased">
                                                            Xenova/herbert-large-cased | 💾357Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/bge-large-zh-v1.5">
                                                            Xenova/bge-large-zh-v1.5 |
                                                            💾327Mb 📥0 ❤️1</option>
                                                        <option value="Xenova/bge-base-zh-v1.5">Xenova/bge-base-zh-v1.5
                                                            |
                                                            💾103Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/bge-small-zh-v1.5">
                                                            Xenova/bge-small-zh-v1.5 |
                                                            💾24Mb 📥0 ❤️0</option>
                                                        <option value="leolee9086/text2vec-base-chinese">
                                                            leolee9086/text2vec-base-chinese | 💾103Mb 📥0 ❤️0</option>
                                                        <option value="Xenova/long-t5-encodec-tglobal-base">
                                                            Xenova/long-t5-encodec-tglobal-base | 💾291Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/jina-embeddings-v2-small-en">
                                                            Xenova/jina-embeddings-v2-small-en | 💾28.5Mb 📥0 ❤️0
                                                        </option>
                                                        <option value="Xenova/jina-embeddings-v2-base-en">
                                                            Xenova/jina-embeddings-v2-base-en | 💾109Mb 📥0 ❤️0</option>
                                                        <option value="do-me/jina-embeddings-v2-small-en">
                                                            do-me/jina-embeddings-v2-small-en (test)</option>
                                                        <option value="do-me/jina-embeddings-v2-base-en">
                                                            do-me/jina-embeddings-v2-base-en (test)</option>
                                                        <option value="do-me/test">
                                                            do-me/test (internal tests only)</option>
                                                    </select>
                                                    <label for="model-name">Model:</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-check form-switch mb-2">
                                                    <input class="form-check-input" type="checkbox" role="switch"
                                                        id="quantized" checked>
                                                    <label class="form-check-label" for="quantized"
                                                        title="Use ~4x smaller & faster quantized but less accurate models (good for low bandwidth)">quantized</label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>Chunking Settings</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating">
                                                                <select class="form-select form-control"
                                                                    id="split-type">
                                                                    <option value="Sentence">Sentence</option>
                                                                    <option value="Chars" selected># Chars</option>
                                                                    <option value="Words"># Words</option>
                                                                    <option value="Tokens"># Tokens</option>
                                                                    <option value="Regex">Regex</option>
                                                                </select>
                                                                <label for="split-type">Split by</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="split-param" class="form-control"
                                                                    type="number" min="1" value="100" />
                                                                <label for="split-param"># Chars</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>App Settings</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input type="number" id="threshold" class="form-control"
                                                                    value="7" min="1" step="1" />
                                                                <label for="threshold"># Results</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="update-rate" class="form-control"
                                                                    type="number" min="1" value="5" />
                                                                <label for="update-rate"># Updates</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>Include Words</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="wordsToCheckAny" class="form-control"
                                                                    type="text" value="" />
                                                                <label for="wordsToCheckAny">Any of</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="wordsToCheckAll" class="form-control"
                                                                    type="text" value="" />
                                                                <label for="wordsToCheckAll">All of</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>Exclude Words</h6>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="wordsToAvoidAny" class="form-control"
                                                                    type="text" value="" />
                                                                <label for="wordsToAvoidAny">Any of</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <div class="form-floating mb-2">
                                                                <input id="wordsToAvoidAll" class="form-control"
                                                                    type="text" value="" />
                                                                <label for="wordsToAvoidAll">All of</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <h6>Import Local Index File</h6>
                                                <div class="row">
                                                    <div class="col-md-8">
                                                        <div class="d-flex mb-2 align-items-center">
                                                            <!-- Added 'align-items-center' class -->
                                                            <input type="file" class="form-control mr-2"
                                                                id="file-upload" />
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="d-flex mb-2 align-items-center">
                                                            <button type="button" class="btn btn-primary"
                                                                id="confirm-upload">
                                                                📂 Import</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-6">
                                                <h6>Import Remote Index File</h6>
                                                <div class="row">
                                                    <div class="col-md-8">
                                                        <div class="form-floating mb-2">
                                                            <input id="importURL" class="form-control w-100" type="text"
                                                                value="https://huggingface.co/datasets/do-me/SemanticFinder/resolve/main/king-james-bible_gte-tiny_q_200-chars_2-dec.json.gz" />
                                                            <label for="importURL">Import URL</label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <div class="d-flex mb-2 align-items-center">
                                                            <button type="button" class="btn btn-primary"
                                                                id="confirm-remote-upload">
                                                                ⬇️ Import</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <h6>Export Index File</h6>

                                            <div class="col-md-3">
                                                <div class="form-floating mb-2">
                                                    <input id="textTitle" class="form-control w-100" type="text"
                                                        value="Hansel and Gretel" />
                                                    <label for="textTitle">Title</label>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-floating mb-2">
                                                    <input id="textAuthor" class="form-control w-100" type="text"
                                                        value="Brothers Grimm" />
                                                    <label for="textAuthor">Author</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-floating mb-2">
                                                    <input id="textYear" class="form-control w-100" type="number"
                                                        min="1" value="1812" />
                                                    <label for="textYear"># Year</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-floating mb-2">
                                                    <input id="textLanguage" class="form-control w-100" type="text"
                                                        value="en" />
                                                    <label for="textLanguage">Language (en)</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="d-flex mb-2 align-items-center">
                                                    <button type="button" class="btn btn-primary"
                                                        id="resetMetadata">🔄 Metadata</button>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-floating mb-2">
                                                    <input id="textSourceURL" class="form-control w-100" type="text"
                                                        value="https://www.grimmstories.com/en/grimm_fairy-tales/hansel_and_gretel" />
                                                    <label for="textSourceURL">Source URL</label>
                                                </div>
                                            </div>

                                            <div class="col-md-4">
                                                <div class="form-floating mb-2">
                                                    <input id="textNotes" class="form-control w-100" type="text"
                                                        value="" />
                                                    <label for="textNotes">Notes</label>
                                                </div>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="form-floating mb-2">
                                                    <input id="exportDecimals" class="form-control w-100" type="number"
                                                        min="1" value="5" />
                                                    <label for="exportDecimals"># Emb. Decimals</label>
                                                </div>
                                            </div>
                                            <!-- Button for downloading only the index. However, considering
                                                         that the index makes up for 99% file size, I don't see a good use case yet...-->
                                            <div class="col-md-3" hidden>
                                                <button type="button" id="exportEmbeddingsDict"
                                                    class="btn btn-primary w-100">Index only</button>
                                            </div>

                                            <div class="col-md-2">
                                                <div class="d-flex mb-2 align-items-center">
                                                    <button type="button" class="btn btn-primary"
                                                        id="exportEmbeddingsDictWithText">💾 Export</button>
                                                </div>
                                            </div>

                                            <h6>Style Preferences</h6>
                                            <div class="col-md-4"
                                                title="Monospace | Calibri | Open Sans | Arial | Arial | Arial Black | Comic Sans MS | Courier New | Georgia | Impact | Times New Roman | Trebuchet MS | Verdana | Tahoma | Lucida Console | Lucida Sans Unicode | Palatino Linotype | Book Antiqua | Palatino | Symbol | Wingdings">
                                                <div class="form-floating mb-2">
                                                    <input id="font-family" class="form-control w-100" type="text"
                                                        value="Open Sans" />
                                                    <label for="font-family">Font-Family</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-floating mb-2">
                                                    <input id="font-size" class="form-control w-100" type="number"
                                                        min="1" value="15" />
                                                    <label for="font-size"># Font-Size</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- progress bar -->
                        <div class="col-12">
                            <div class="progress" role="progressbar" aria-label="Loading model" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-secondary" id="loading-progress" style="width: 0;">""</div>
                            </div>
                        </div>
                        <div>
                            <div class="progress" role="progressbar" aria-label="Progress Bar" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100" style="height: 75%">
                                <div id="progressBarProgress" class="progress-bar progress-bar-striped"
                                    style="width: 0%;">""
                                </div>
                            </div>

                        </div>


                        <!--  text box -->
                        <div class="form-floating">
                            <textarea id="input-text" class="form-control"
                                placeholder="Enter">Near a great forest there lived a poor woodcutter and his wife, and his two children; the boy's name was Hansel and the girl's Grethel. They had very little to bite or to sup, and once, when there was great dearth in the land, the man could not even gain the daily bread. As he lay in bed one night thinking of this, and turning and tossing, he sighed heavily, and said to his wife, "What will become of us? we cannot even feed our children; there is nothing left for ourselves."
"I will tell you what, husband," answered the wife; "we will take the children early in the morning into the forest, where it is thickest; we will make them a fire, and we will give each of them a piece of bread, then we will go to our work and leave them alone; they will never find the way home again, and we shall be quit of them."
"No, wife," said the man, "I cannot do that; I cannot find in my heart to take my children into the forest and to leave them there alone; the wild animals would soon come and devour them." - "O you fool," said she, "then we will all four starve; you had better get the coffins ready," and she left him no peace until he consented. "But I really pity the poor children," said the man.
The two children had not been able to sleep for hunger, and had heard what their step-mother had said to their father. Grethel wept bitterly, and said to Hansel, "It is all over with us."
"Do be quiet, Grethel," said Hansel, "and do not fret; 1 will manage something." And when the parents had gone to sleep he got up, put on his little coat, opened the back door, and slipped out. The moon was shining brightly, and the white flints that lay in front of the house glistened like pieces of silver. Hansel stooped and filled the little pocket of his coat as full as it would hold. Then he went back again, and said to Grethel, "Be easy, dear little sister, and go to sleep quietly; God will not forsake us," and laid himself down again in his bed. When the day was breaking, and before the sun had risen, the wife came and awakened the two children, saying, "Get up, you lazy bones; we are going into the forest to cut wood." Then she gave each of them a piece of bread, and said, "That is for dinner, and you must not eat it before then, for you will get no more." Grethel carried the bread under her apron, for Hansel had his pockets full of the flints. Then they set off all together on their way to the forest. When they had gone a little way Hansel stood still and looked back towards the house, and this he did again and again, till his father said to him, "Hansel, what are you looking at? take care not to forget your legs."
"O father," said Hansel, "lam looking at my little white kitten, who is sitting up on the roof to bid me good-bye." - "You young fool," said the woman, "that is not your kitten, but the sunshine on the chimney-pot." Of course Hansel had not been looking at his kitten, but had been taking every now and then a flint from his pocket and dropping it on the road. When they reached the middle of the forest the father told the children to collect wood to make a fire to keep them, warm; and Hansel and Grethel gathered brushwood enough for a little mountain; and it was set on fire, and when the flame was burning quite high the wife said, "Now lie down by the fire and rest yourselves, you children, and we will go and cut wood; and when we are ready we will come and fetch you."
So Hansel and Grethel sat by the fire, and at noon they each ate their pieces of bread. They thought their father was in the wood all the time, as they seemed to hear the strokes of the axe: but really it was only a dry branch hanging to a withered tree that the wind moved to and fro. So when they had stayed there a long time their eyelids closed with weariness, and they fell fast asleep.
When at last they woke it was night, and Grethel began to cry, and said, "How shall we ever get out of this wood? "But Hansel comforted her, saying, "Wait a little while longer, until the moon rises, and then we can easily find the way home." And when the full moon got up Hansel took his little sister by the hand, and followed the way where the flint stones shone like silver, and showed them the road. They walked on the whole night through, and at the break of day they came to their father's house. They knocked at the door, and when the wife opened it and saw that it was Hansel and Grethel she said, "You naughty children, why did you sleep so long in the wood? we thought you were never coming home again!" But the father was glad, for it had gone to his heart to leave them both in the woods alone.
Not very long after that there was again great scarcity in those parts, and the children heard their mother say at night in bed to their father, "Everything is finished up; we have only half a loaf, and after that the tale comes to an end. The children must be off; we will take them farther into the wood this time, so that they shall not be able to find the way back again; there is no other way to manage." The man felt sad at heart, and he thought, "It would better to share one's last morsel with one's children." But the wife would listen to nothing that he said, but scolded and reproached him. He who says A must say B too, and when a man has given in once he has to do it a second time.</textarea>
                        </div>

                        <!--  navigation buttons -->
                        <div class="text-center" id="submitGroup">
                            <button id="prev" class="btn btn-md btn-secondary mb-2 nav-button" disabled>👈
                                prev
                            </button>
                            <button id="next" class="btn btn-md btn-secondary mb-2 nav-button" disabled>next
                                👉
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="col-sm-3"> <!-- 20% column -->
                <div id="results">
                    <ul id="results-list"></ul>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12">
                    <div>
                        <hr />
                        <h4>Chat (Retrieval Augmented Generation, RAG)</h4>
                        <p>Enter a question to be answered. The model is automatically prompted with the top search
                            results in the form: <br><b>"Based on the following input, answer the question: [your
                                question] [top search results]"</b>.<br> If you encounter errors, the input is probably
                            too long (either too many or too
                            long results or too long prompt). Also, make
                            sure to check the right prompting style! Xenova/LaMini-Flan-T5-783M is by far the best
                            quantized
                            model currently available and delivers good results while the others produce nonsense in
                            most cases. At some point <a href="https://github.com/xenova/transformers.js/pull/379"
                                target="_blank">Falcon & Mistral/Zephyr models</a> will probably become available
                            here.<br><b>Attention</b>: Loads very large models with
                            more than 1.5Gb (!) of resources.</p>
                        <div class="form-floating input-group mb-2">
                            <input id="chat_query" class="form-control"
                                value="What do these paragraphs have in common?">
                            <label for="query-text">Chat Query</label>
                        </div>

                        <div class="d-flex flex-row">
                            <button id="get_chat" class="btn btn-md btn-primary mb-2 nav-button" disabled>Chat</button>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating mb-2">
                                        <select class="form-select form-control" id="chat-model-name">
                                            <option selected value="Xenova/LaMini-Flan-T5-783M">
                                                Xenova/LaMini-Flan-T5-783M | 💾1.65Gb 📥17 ❤️20</option>
                                            <option value="Xenova/t5-small">Xenova/t5-small | 💾81Mb 📥2
                                                ❤️2</option>
                                            <option value="Xenova/flan-t5-small">Xenova/flan-t5-small</option>
                                            <option value="Xenova/LaMini-Flan-T5-783M">Xenova/LaMini-Flan-T5-783M
                                            </option>
                                            <option value="Xenova/LaMini-Flan-T5-248M">Xenova/LaMini-Flan-T5-248M
                                            </option>
                                            <option value="Xenova/LaMini-Flan-T5-77M">Xenova/LaMini-Flan-T5-77M</option>
                                            <option value="Xenova/LaMini-T5-61M">Xenova/LaMini-T5-61M</option>
                                            <option value="Xenova/LaMini-T5-738M">Xenova/LaMini-T5-738M</option>
                                            <option value="Xenova/LaMini-T5-223M">Xenova/LaMini-T5-223M</option>
                                            <option value="Xenova/mt5-small">Xenova/mt5-small</option>
                                            <option value="Xenova/mt5-base">Xenova/mt5-base</option>
                                            <option value="Xenova/t5-base">Xenova/t5-base</option>
                                            <option value="Xenova/t5-v1_1-base">Xenova/t5-v1_1-base</option>
                                            <option value="Xenova/flan-t5-base">Xenova/flan-t5-base</option>
                                            <option value="Xenova/t5-v1_1-small">Xenova/t5-v1_1-small</option>
                                            <option value="Xenova/blenderbot-400M-distill">
                                                Xenova/blenderbot-400M-distill</option>
                                            <option value="Xenova/blenderbot_small-90M">Xenova/blenderbot_small-90M
                                            </option>
                                            <option value="Xenova/long-t5-tglobal-base">Xenova/long-t5-tglobal-base
                                            </option>
                                            <option value="Xenova/long-t5-local-base">Xenova/long-t5-local-base</option>
                                            <option value="Xenova/long-t5-tglobal-base-16384-book-summary">
                                                Xenova/long-t5-tglobal-base-16384-book-summary</option>

                                        </select>
                                        <label for="model-name">Model:</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating mb-2">
                                        <input type="number" id="chat_max_new_tokens" class="form-control" value="100"
                                            min="1" step="1" />
                                        <label for="max_new_tokens"># max new tokens</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <p id="chat_text" class="ml-2"></p>
                        <!-- progress bar -->
                        <div class="col-12">
                            <div class="progress" role="progressbar" aria-label="Loading model" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-secondary" id="chat-progress" style="width: 0;">""</div>
                            </div>
                        </div>
                        <div>
                            <div class="progress" role="progressbar" aria-label="Progress Bar" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100" style="height: 75%">
                                <div id="progressBarChat" class="progress-bar progress-bar-striped" style="width: 0%;">
                                    ""
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
                <div class="col-12">
                    <div>
                        <hr />
                        <h4>Summary (Retrieval Augmented Generation, RAG)</h4>
                        <p>Summarizes the top search results. Works best with non-fictional texts and longer text
                            chunks (>200 chars).<br><b>Attention</b>: Loads very large models with hundreds of MB!</p>
                        <br>
                        <div class="d-flex flex-row">
                            <button id="get_summary" class="btn btn-md btn-primary mb-2 nav-button"
                                disabled>Summarize</button>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-floating mb-2">
                                        <select class="form-select form-control" id="summary-model-name">

                                            <option value="Xenova/distilbart-cnn-6-6">Xenova/distilbart-cnn-6-6</option>
                                            <option value="Xenova/bart-large-cnn">Xenova/bart-large-cnn</option>
                                            <option value="ahmedaeb/distilbart-cnn-6-6-optimised">
                                                ahmedaeb/distilbart-cnn-6-6-optimised</option>
                                            <option value="Xenova/distilbart-xsum-12-1">Xenova/distilbart-xsum-12-1
                                            </option>
                                            <option value="Xenova/distilbart-xsum-6-6">Xenova/distilbart-xsum-6-6
                                            </option>
                                            <option value="Xenova/distilbart-xsum-12-3">Xenova/distilbart-xsum-12-3
                                            </option>
                                            <option value="Xenova/distilbart-xsum-9-6">Xenova/distilbart-xsum-9-6
                                            </option>
                                            <option selected value="Xenova/distilbart-xsum-12-6">
                                                Xenova/distilbart-xsum-12-6</option>
                                            <option value="Xenova/distilbart-cnn-12-3">Xenova/distilbart-cnn-12-3
                                            </option>
                                            <option value="Xenova/distilbart-cnn-12-6">Xenova/distilbart-cnn-12-6
                                            </option>
                                            <option value="Xenova/bart-large-xsum">Xenova/bart-large-xsum</option>
                                        </select>
                                        <label for="model-name">Model:</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating mb-2">
                                        <input type="number" id="summary_max_new_tokens" class="form-control"
                                            value="100" min="1" step="1" />
                                        <label for="max_new_tokens"># max new tokens</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center flex-row">
                            <p id="summary_text" class="ml-2"></p>
                        </div>
                        <!-- progress bar -->
                        <div class="col-12">
                            <div class="progress" role="progressbar" aria-label="Loading model" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-secondary" id="summary-progress" style="width: 0;">""</div>
                            </div>
                        </div>
                        <div>
                            <div class="progress" role="progressbar" aria-label="Progress Bar" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100" style="height: 75%">
                                <div id="progressBarSummary" class="progress-bar progress-bar-striped"
                                    style="width: 0%;">""
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>

</body>

</html>